<template>
	<view class="botitem">
		<view v-for="(good,index) in list" :key="index" class="flex-item" @tap="itemClick(good,index)">
			<image :src="good.activeicon" v-if="index == activeitem" class="boticon"></image>
			<image :src="good.icon" class="boticon" v-else></image>
			<uni-badge :text="messageNum" size="small" v-if="messageNum!=0 && index==1" class="carNum"></uni-badge>
		</view>
	</view>
</template>

<script>
	import uniBadge from '@/components/uni-badge/uni-badge.vue'
	export default {
		components: {
			uniBadge
		},
		props:{
			list: {
				type: Array,
				default(){
					return [
						{
							icon:"https://www.dalinicegroup.com/w/images/platform_tabbar_icon_home_default.png",
							activeicon:"https://www.dalinicegroup.com/w/images/platform_tabbar_icon_home_selected.png",
							url:'/pages/index/index'
						},
						{
							icon:"https://www.dalinicegroup.com/w/images/platform_tabbar_icon_message_dufault.png",
							activeicon:"https://www.dalinicegroup.com/w/images/platform_tabbar_icon_message_selected.png",
							url:'/pages/user/message/msg-index'
						},
						{
							icon:"https://www.dalinicegroup.com/w/images/platform_tabbar_icon_my_default.png",
							activeicon:"https://www.dalinicegroup.com/w/images/platform_tabbar_icon_my_selected.png",
							url:'/pages/user/index'
						}
					]
				}
			},
			activeitem:{
				type: Number,
				default:0
			},
			messageNum:{
				type: Number,
				default:0
			}
		},
		methods:{
			itemClick(good,index){
				if(index != this.activeitem)
					this.$emit("itemClick",good.url)
			}
		}
	}
</script>

<style lang="scss">
	.botitem{
		display: flex;
		flex: 1;
		.flex-item{
			display: inline-flex;
			flex: 1;
			justify-content: center;
			align-items: center;
			.boticon{
				width:45upx;
				height:45upx;
			}
			.carNum{
				position: absolute;
				top: 0;
				right: 45%;
			}
		}
	}
</style>
